<template>
    <!-- <el-form :model="form" label-width="auto" style="max-width: 600px">

      <el-form-item label="标题" required>
        <el-input v-model="form.name" />
      </el-form-item>

      <el-form-item label="内容简介">
        <el-input v-model="form.desc" type="textarea" placeholder="这是内容简介" />
      </el-form-item>

      
      <el-form-item label="创建时间">
        <el-col :span="11">
        <el-date-picker
          v-model="form.date1"
          
          type="date"
          placeholder="2024-10-25 00:00:00"
          style="width: 100%"
        />
        </el-col>
      </el-form-item>


      <el-form-item label="省份">
        <el-checkbox-group v-model="form.type">
          <el-checkbox value="贵州省" name="type" >
            贵州省
          </el-checkbox>
          <el-checkbox value="四川省" name="type">
            四川省
          </el-checkbox>
          <el-checkbox value="云南省" name="type">
            云南省
          </el-checkbox>
          <el-checkbox value="重庆市" name="type">
            重庆市
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="性别">
        <el-radio-group v-model="form.resource">
          <el-radio value="男">男</el-radio>
          <el-radio value="女">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="公司">
        <el-input v-model="form.desc" type="text" placeholder="阿里公司" />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交数据</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form> -->
    <div>
        <el-table :data="tableData" style="width: 100%" height="250" :row-class-name="warning">
        <el-table-column fixed prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="姓名" width="200" />
        <el-table-column prop="son" label="学号" width="180" />
        <el-table-column prop="xingbie" label="性别" width="180" />
        <el-table-column prop="phone" label="联系方式" width="300" />
        <el-table-column prop="address" label="地址" />
     </el-table>
    </div>

     <el-alert
    title="成功提示的文案"
    type="success"
    center
    show-icon>
  </el-alert>
  <el-alert
    title="消息提示的文案"
    type="info"
    center
    show-icon>
  </el-alert>
  <el-alert
    title="警告提示的文案"
    type="warning"
    center
    show-icon>
  </el-alert>
  <el-alert
    title="错误提示的文案"
    type="error"
    center
    show-icon>
  </el-alert>

  </template>
  
  <script lang="ts" setup>
  import { reactive } from 'vue'
  // import { tableData } from 'vue'

  // const form = reactive({
  //   name: '',
  //   region: '',
  //   date1: '',
  //   date2: '',
  //   delivery: false,
  //   type: [],
  //   resource: '',
  //   desc: '',
  // })
  
  // const onSubmit = () => {
  //   console.log('submit!')
  // }

  interface User {
  date: string
  name: string
  address: string
  son:string
  xingbie:string
  phone:string
}

const warning = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  else if (rowIndex === 5) {
    return 'warning-row'
  }
  else if (rowIndex === 7) {
    return 'success-row'
  }
  return ''
}

  const tableData : User[] = [
  {
    date: '2016-05-03',
    name: 'Tom1',
    address: 'No. 189, Grove St, Los Angeles',
    son:'1223401',
    xingbie:'男',
    phone:'19101441111'
  },
  {
    date: '2016-05-02',
    name: 'Tom2',
    address: 'No. 189, Grove St, Los Angeles',
    son:'1223402',
    xingbie:'男',
    phone:'19101441112'
  },
  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
    son:'1223403',
    xingbie:'女',
    phone:'19101441113'
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
    son:'1223404',
    xingbie:'男',
    phone:'19101441114'
  },
  {
    date: '2016-05-01',
    name: 'Tom5',
    address: 'No. 189, Grove St, Los Angeles',
    son:'1223405',
    xingbie:'女',
    phone:'19101441115'
  },
  {
    date: '2016-05-01',
    name: 'Tom6',
    address: 'No. 189, Grove St, Los Angeles',
    son:'1223406',
    xingbie:'男',
    phone:'19101441116'
  },
  {
    date: '2016-05-01',
    name: 'Tom7',
    address: 'No. 189, Grove St, Los Angeles',
    son:'1223407',
    xingbie:'男',
    phone:'19101441117'
  },
  {
    date: '2016-05-01',
    name: 'Tom8',
    address: 'No. 189, Grove St, Los Angeles',
    son:'1223408',
    xingbie:'女',
    phone:'19101441118'
  },
  {
    date: '2016-05-01',
    name: 'Tom9',
    address: 'No. 189, Grove St, Los Angeles',
    son:'1223409',
    xingbie:'男',
    phone:'19101441119'
  },
]









  </script>
  
  <style>
  .el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
  }
  .el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
  }
  </style>

  <!-- <template>
    <div>
      <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
      </v-form-render>
     
    </div>
  </template>
  
  <script setup>
    import { ref, reactive } from 'vue'
    import { ElMessage } from 'element-plus'
  
    const formJson = reactive({"widgetList":[{"key":68718,"type":"input","icon":"text-field","formItemFlag":true,"options":{"name":"input31854","label":"标题","labelAlign":"","type":"text","defaultValue":"","placeholder":"这是标题内容","columnWidth":"200px","size":"","labelWidth":null,"labelHidden":false,"readonly":false,"disabled":false,"hidden":false,"clearable":true,"showPassword":false,"required":true,"requiredHint":"","validation":"","validationHint":"","customClass":[],"labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"minLength":null,"maxLength":null,"showWordLimit":false,"prefixIcon":"","suffixIcon":"","appendButton":false,"appendButtonDisabled":false,"buttonIcon":"custom-search","onCreated":"","onMounted":"","onInput":"","onChange":"","onFocus":"","onBlur":"","onValidate":"","onAppendButtonClick":""},"id":"input31854"},{"key":88729,"type":"textarea","icon":"textarea-field","formItemFlag":true,"options":{"name":"textarea34078","label":"内容简介","labelAlign":"","rows":3,"defaultValue":"","placeholder":"这是内容简介","columnWidth":"200px","size":"","labelWidth":null,"labelHidden":false,"readonly":false,"disabled":false,"hidden":false,"required":false,"requiredHint":"","validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"minLength":null,"maxLength":null,"showWordLimit":false,"onCreated":"","onMounted":"","onInput":"","onChange":"","onFocus":"","onBlur":"","onValidate":""},"id":"textarea34078"},{"key":113154,"type":"date","icon":"date-field","formItemFlag":true,"options":{"name":"date80997","label":"创建日期","labelAlign":"","type":"datetime","defaultValue":null,"placeholder":"","columnWidth":"200px","size":"","autoFullWidth":true,"labelWidth":null,"labelHidden":false,"readonly":false,"disabled":false,"hidden":false,"clearable":true,"editable":false,"format":"YYYY-MM-DD HH:mm:ss","valueFormat":"YYYY-MM-DD","required":false,"requiredHint":"","validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"onCreated":"","onMounted":"","onChange":"","onFocus":"","onBlur":"","onValidate":""},"id":"date80997"},{"key":87868,"type":"checkbox","icon":"checkbox-field","formItemFlag":true,"options":{"name":"checkbox49955","label":"省份","labelAlign":"","defaultValue":[1,4],"columnWidth":"200px","size":"","displayStyle":"inline","buttonStyle":false,"border":false,"labelWidth":null,"labelHidden":false,"disabled":false,"hidden":false,"optionItems":[{"label":"贵州省","value":1},{"label":"四川省","value":2},{"label":"云南省","value":3},{"value":4,"label":"重庆市"}],"required":false,"requiredHint":"","validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"onCreated":"","onMounted":"","onChange":"","onValidate":""},"id":"checkbox49955"},{"key":49111,"type":"radio","icon":"radio-field","formItemFlag":true,"options":{"name":"radio117030","label":"性别","labelAlign":"","defaultValue":2,"columnWidth":"200px","size":"","displayStyle":"inline","buttonStyle":false,"border":false,"labelWidth":null,"labelHidden":false,"disabled":false,"hidden":false,"optionItems":[{"label":"男","value":1},{"label":"女","value":"2"}],"required":false,"requiredHint":"","validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"onCreated":"","onMounted":"","onChange":"","onValidate":""},"id":"radio117030"},{"key":68718,"type":"input","icon":"text-field","formItemFlag":true,"options":{"name":"input75069","label":"公司","labelAlign":"","type":"text","defaultValue":"","placeholder":"阿里公司","columnWidth":"200px","size":"","labelWidth":null,"labelHidden":false,"readonly":false,"disabled":false,"hidden":false,"clearable":true,"showPassword":false,"required":false,"requiredHint":"","validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"minLength":null,"maxLength":null,"showWordLimit":false,"prefixIcon":"","suffixIcon":"","appendButton":false,"appendButtonDisabled":false,"buttonIcon":"custom-search","onCreated":"","onMounted":"","onInput":"","onChange":"","onFocus":"","onBlur":"","onValidate":"","onAppendButtonClick":""},"id":"input75069"},{"key":60950,"type":"button","icon":"button","formItemFlag":false,"options":{"name":"button56131","label":"提交数据","columnWidth":"200px","size":"","displayStyle":"inline","disabled":false,"hidden":false,"type":"","plain":false,"round":false,"circle":false,"icon":null,"customClass":"","onCreated":"","onMounted":"","onClick":""},"id":"button56131"},{"key":60950,"type":"button","icon":"button","formItemFlag":false,"options":{"name":"button101233","label":"取消","columnWidth":"200px","size":"","displayStyle":"inline","disabled":false,"hidden":false,"type":"","plain":false,"round":false,"circle":false,"icon":null,"customClass":"","onCreated":"","onMounted":"","onClick":""},"id":"button101233"}],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":[],"functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":""}})
    const formData = reactive({})
    const optionData = reactive({})
    const vFormRef = ref(null)
  
    const submitForm = () => {
      vFormRef.value.getFormData().then(formData => {
        // Form Validation OK
        alert( JSON.stringify(formData) )
      }).catch(error => {
        // Form Validation failed
        ElMessage.error(error)
      })
    }
  </script> -->
